정보성 이미지
정보성 이미지 (Informative Image)
개요
정보성 이미지란 웹 페이지 내에서 단순한 시각적 장식을 넘어, 사용자에게 특정한 정보, 데이터, 또는 기능을 전달하는 목적을 가진 이미지를 의미한다.
웹 접근성(Web Accessibility) 관점에서 정보성 이미지는 시각 장애인이 사용하는 스크린 리더(Screen Reader, 화면의 텍스트와 요소를 음성으로 읽어주는 소프트웨어)가 해당 이미지의 의미를 정확히 해석하여 사용자에게 전달할 수 있도록 적절한 대체 텍스트(Alternative Text)를 제공해야 하는 필수 요소이다.
정보성 이미지 vs 장식성 이미지 비교
웹 콘텐츠 내의 이미지는 그 목적에 따라 다음과 같이 구분된다.
| 구분 | 정보성 이미지 (Informative Image) | 장식성 이미지 (Decorative Image) |
|---|---|---|
| 목적 | 정보 전달, 기능 수행, 데이터 시각화 | 심미적 효과, 레이아웃 구분, 분위기 조성 |
| 핵심 특징 | 이미지가 제거되었을 때 정보 손실이 발생함 | 이미지가 없어도 콘텐츠 이해에 지장이 없음 |
| 대체 텍스트 | 이미지의 의미를 담은 구체적인 텍스트 필요 | alt="" (빈 값)으로 설정하여 스크린 리더가 무시하게 함 |
| 예시 | 제품 사진, 통계 그래프, 기능 아이콘(돋보기 등) | 배경 패턴, 구분선, 본문 옆 단순 삽입 이미지 |
대체 텍스트(alt text) 작성 원칙
대체 텍스트의 핵심은 "이미지를 볼 수 없는 사용자에게 이 이미지가 어떤 정보를 전달하고 있는가"를 텍스트로 변환하는 것이다.
상황별 작성 가이드
- 아이콘 및 기능성 이미지: 이미지의 외형이 아닌 '기능'을 작성한다. (예: 돋보기 아이콘 $\rightarrow$ "검색")
- 사진: 사진이 전달하려는 맥락에 맞게 구체적으로 묘사한다. 단순히 "강아지 사진"이 아니라 "잔디밭에서 공을 가지고 노는 골든 리트리버"와 같이 작성한다.
- 그래프 및 차트: 데이터의 핵심 결론이나 추세를 요약하여 작성한다. 상세 데이터는 별도의 텍스트나 표로 제공해야 한다.
대체 텍스트 작성 전후 비교 사례
| 이미지 유형 | 부적절한 예시 (Bad) | 적절한 예시 (Good) | 이유 |
|---|---|---|---|
| 기능 아이콘 | alt="돋보기 모양 아이콘" |
alt="검색" |
외형 묘사보다 기능 전달이 중요함 |
| 제품 사진 | alt="운동화 사진" |
alt="나이키 에어맥스 2023 화이트 모델" |
구체적인 제품 식별 정보 제공 필요 |
| 통계 그래프 | alt="매출 그래프" |
alt="2023년 분기별 매출이 지속적으로 상승하는 막대 그래프" |
그래프가 나타내는 핵심 정보 전달 |
| 인물 사진 | alt="사람 사진" |
alt="강연 중인 홍길동 대표" |
인물의 신원과 상황(맥락) 설명 필요 |
구현 방법 및 기술적 표준
기본 구현: alt 속성
HTML의 <img> 태그 내 alt 속성을 사용하여 대체 텍스트를 제공한다.
<!-- 정보성 이미지: 의미 있는 대체 텍스트 제공 -->
<img src="search-icon.png" alt="검색">
<img src="product-01.jpg" alt="삼성 갤럭시 S24 울트라 티타늄 그레이">
<!-- 장식성 이미지: alt 속성을 빈 값으로 설정하여 스크린 리더가 무시하도록 함 -->
<img src="background-pattern.png" alt="">
<img src="divider-line.png" alt="">
복잡한 이미지 구현: <a href="/doc/%EA%B8%B0%EC%88%A0/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4%20%EA%B0%9C%EB%B0%9C/%EC%9B%B9%20%EC%A0%91%EA%B7%BC%EC%84%B1/aria-describedby" class="wiki-link wiki-link-missing">aria-describedby</a> 및 <a href="/doc/%EA%B8%B0%EC%88%A0/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4%20%EA%B0%9C%EB%B0%9C/%EC%9B%B9%20%EC%A0%91%EA%B7%BC%EC%84%B1/aria-labelledby" class="wiki-link wiki-link-missing">aria-labelledby</a>
alt 속성만으로 모든 정보를 전달하기 어려운 경우, ARIA 속성을 사용하여 외부 요소와 연결한다.
1. aria-describedby (상세 설명 연결)
차트나 인포그래픽처럼 긴 설명이 필요한 경우 사용한다.
<!-- 복잡한 이미지와 상세 설명 연결 -->
<img src="quarterly-report-chart.png"
alt="2023년 분기별 매출 성장 차트"
aria-describedby="chart-details">
<!-- 이미지의 상세 설명을 담은 텍스트 영역 -->
<div id="chart-details">
<p>1분기 10억 원에서 시작하여 4분기 25억 원으로 약 150% 성장하였으며,
특히 3분기에 가장 가파른 상승 곡선을 보였습니다.</p>
</div>
2. aria-labelledby (이름/제목 연결)
이미지의 제목이 페이지 내 다른 텍스트 요소로 이미 존재하는 경우, 해당 요소의 id를 연결하여 중복 작성을 피한다.
<!-- 이미지의 제목을 기존 텍스트 요소에서 참조 -->
<h3 id="image-title">2024년 신제품 라인업</h3>
<img src="product-lineup.jpg" aria-labelledby="image-title">
정보성 이미지 설계 시 주의사항
정보성 이미지를 구현할 때 흔히 발생하는 실수와 해결책은 다음과 같다.
- 텍스트 이미지 처리: 이미지 내부에 글자가 포함된 경우(예: 이벤트 배너, 로고 내 텍스트), 이미지 속의 모든 텍스트 내용을
alt속성에 그대로 옮겨 적어야 한다. - 중복 표현 지양:
alt="~ 이미지입니다",alt="~ 사진입니다"와 같은 표현은 사용하지 않는다. 스크린 리더는 이미 해당 요소가 이미지임을 알리고 읽어주기 때문에 "이미지"라는 단어가 반복되어 사용자 경험을 저해한다. - 주변 텍스트와의 중복 회피: 이미지 바로 옆에 동일한 내용의 텍스트가 적혀 있는 경우, 대체 텍스트를 중복해서 작성하지 않는다. 이 경우 이미지는 '장식성'으로 간주하여
alt=""처리를 하는 것이 효율적이다. - 과도한 상세 묘사 금지: 정보 전달에 불필요한 세부 묘사(예: "왼쪽 상단에 작은 점이 있는 파란색 배경의...")는 핵심 정보 파악을 방해하므로 지양한다.
검증 및 테스트 방법
작성된 정보성 이미지가 실제로 접근 가능한지 확인하기 위해 다음의 과정을 거친다.
1. 스크린 리더 테스트
실제 사용 환경과 동일하게 스크린 리더를 실행하여 이미지가 어떻게 낭독되는지 확인한다. * Windows: NVDA, JAWS * macOS/iOS: VoiceOver * Android: TalkBack * 체크리스트: 이미지가 건너뛰어지지는 않는가? 대체 텍스트가 맥락에 맞게 읽히는가?
2. 자동 검사 도구 활용
웹 접근성 평가 도구를 통해 alt 속성의 누락 여부를 빠르게 전수 조사한다.
* Lighthouse: Chrome 개발자 도구에 내장된 접근성 검사 기능
* WAVE (Web Accessibility Evaluation Tool): 웹 페이지의 접근성 오류를 시각적으로 표시해주는 도구
* axe DevTools: 정밀한 접근성 진단 브라우저 확장 프로그램
관련 표준 및 참조
더 자세한 기준은 국제 웹 접근성 표준인 WCAG (Web Content Accessibility Guidelines)를 참조한다.
이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.
주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.